자바스크립트에서 select 태그에
onchange 이벤트를 사용할 수 있습니다. 그런데
onchange 이벤트가 동작하지 않는 경우가 발생할 수 있는데요... 그 원인과 해결방법을 알아봅니다.
onchange가 select 태그에 바로 동작하지 않는 경우는
select 태그를 클릭해서 값을 선택하지 않고 select 태그의 value 프로퍼티의 값을 스크립트를 사용하여 업데이트 하는 경우입니다. 예를들어...
<select onchange="updated()">
<option value="1">1</option>
<option value="2">2</option>
</select>
위 값을 변경하는 경우를 예를 들면... DOM 클릭이 아닌 스크립트를 아래처럼 사용한다고 생각해봅니다.
document.querySelector('select').value = '2';
이 경우 updated()라는 함수가 동작하지 않습니다. 그 이유는 onchange 이벤트는 해당 엘리먼트의 blur 여부에 따라 동작하기 때문입니다.
# onchange 동작하도록 하는 해결방법은 ?
해결 방법은 onchange() 함수를 해당 DOM에 추가하여 사용하면 됩니다. 즉 select의 값을 업데이트하고 함수를 연이어 동작하면 되는 거죠. 만약 onchange()를 가진 엘리먼트 요소가 select라면 아래처럼 사용할 수 있겠죠.
document.querySelector('select').value = '2';
// 엘리먼트를 찾아 값을 변경
document.querySelector('select').onchange();
// 값이 바뀐 엘리먼트에 onchange 함수를 실행
위와 같이 코드를 적용하면 updated()라는 함수가 뒤따라 실행하게 됩니다.
! 참고사항
입력폼의 양식이 많은 경우 onchange()를 가지는 엘리먼트 요소가
하나가 아닌 여러개인 경우가 있을 것입니다. 이 경우 하나씩 적용하기 보다 onchange를 가지는 모든 엘리먼트를 가져와 동작시키는 방법이 더욱 편합니다. 예를들면 아래와 같습니다.
var elements = document.querySelectorAll('[onchange]');
for(var i = 0; i < elements.length; i++) {
var thisFunc = elements[i].getAttribute('onchange');
eval(thisFunc);
};
설명하면 모든 onchange 속성을 가지는 태그를 찾아 그 값을 eval() 함수를 사용하여 실행하는 방법입니다. 실제로 사용해보면 매우 편리합니다.